<template>
	<view class="content">
		<!-- <view> -->
		<!-- card 监测可用 -->
		<!-- <view class="card_view">
			<image class="card_img" src="../../../static/image/mine/myDoll/img_orange.png"></image>
			<view class="card_view_content">
				<view class="card_view_content_L">
					<text class="card_view_content_L_T1">监测可用&nbsp;(个)</text>
					<text class="card_view_content_L_T2">{{ useMonitor }}</text>
				</view>
				<image src="../../../static/image/mine/myDoll/icon_buy.png" style="width: 161rpx;height: 69rpx;margin-right: 40rpx;" @click="toBuy()"></image>
			</view>
		</view> -->
		<!-- card 商城可用 -->
		<view class="card_view MT24">
			<image class="card_img" src="../../../static/image/mine/myDoll/img_green.png"></image>
			<view class="card_view_content">
				<view class="card_view_content_L">
					<text class="card_view_content_L_T1">商城可用&nbsp;(个)</text>
					<text class="card_view_content_L_T2">{{ useShop }}</text>
				</view>
				<image src="../../../static/image/mine/myDoll/icon_use.png" style="width: 161rpx;height: 69rpx;margin-right: 40rpx;" @click="toUse()"></image>
			</view>
		</view>
		<!-- 两个tab -->
		<view class="Tab">
			<text class="ML45" :style="{ fontSize: Tab1Size + 'rpx' }" @click="toAidouDetail()">商城明细</text>
			<!-- <text class="ML54" :style="{ fontSize: Tab2Size + 'rpx' }" @click="toMonitorDetail()">监测明细</text> -->
		</view>
		<!-- </view> -->
		<!-- 使用明细 -->
		<view class="Bottom_View">
			<swiper :indicator-dots="false" :autoplay="false" :duration="500" :current="swiperIndex" style="height: 100%;" @change="changeItem">
				<swiper-item>
					<!-- 商 城 明 细 -->
					<scroll-view scroll-y="true" style="width: 100%;height: 95%;" @scrolltolower="scrolltolower">
						<!-- <view class="TabItemView"> -->
						<view class="TabItem" v-for="(item, index) in aiDouInfo" :key="index">
							<view class="frontLine"></view>
							<view class="TabItemText">
								<text class="ItemTitle">{{ item.method }}</text>
								<text class="ItemDate">{{ item.updateTime }}</text>
							</view>
							<text class="ItemNum">{{ item.amount }}</text>
							<!-- <view v-if="index == aiDouInfo.length - 1" style="width: 100%;height: 150rpx;">已展示全部数据</view> -->
						</view>
						<view class="loadMore">{{ loadMoreText1 }}</view>
						<!-- </view> -->
					</scroll-view>
				</swiper-item>
				<!-- 监测明细 -->
				<!-- <swiper-item>
					<scroll-view scroll-y="true" style="width: 100%;height: 95%;" @scrolltolower="scrolltolower">
						<view class="TabItem" v-for="(item, index) in monitorInfo" :key="index">
							<view class="frontLine"></view>
							<view class="TabItemText">
								<text class="ItemTitle">{{ item.method }}</text>
								<text class="ItemDate">{{ item.updateTime }}</text>
							</view>
							<text class="ItemNum">{{ item.amount }}</text>
						</view>
						<view class="loadMore">{{ loadMoreText2 }}</view>
					</scroll-view>
				</swiper-item> -->
			</swiper>
		</view>
	</view>
</template>

<script>
import * as api from '@/api/login';
import regular from '@/api/regular';
import util from '../../../utils/utils.js';
export default {
	data() {
		return {
			userId: '',
			useMonitor: '', //监测可用的爱豆数量
			useShop: '', //商城可用
			isAido: true, //是否是爱豆的tab
			Tab1Size: 38, //文字大小 大
			Tab2Size: 28, //。。。
			swiperIndex: 0, //当前Tab的下标
			aiDouInfo: [], //爱豆明细
			monitorInfo: [], //监测明细
			// 分页式获取记录
			shopDetailCurrentIndex: 0,  //商城明细
			monitorDetailCurrentIndex: 0, //检测明细
			loadMoreText1: '下拉加载更多',
			loadMoreText2: '下拉加载更多',
		};
	},
	/*
	 *商城爱豆 （个人爱豆） 可以用来购买监测爱豆（服务爱豆），反之则不行
	 */
	onLoad(option) {
		let myDoll = JSON.parse(option.myDoll);
		if (myDoll != null || myDoll != undefined) {
			this.useMonitor = regular.numFormat(myDoll.servicePurse);
			this.useShop = regular.numFormat(myDoll.userPurse);
		}
		this.userId = this.$store.state.userInfo.currentUser.userId;
		this.getServicePurseFlowRecord();
		this.getUserPurseFlowRecord();
	},
	onReady() {
		// let that = this;
		// uni.$once('updatePurseInfo',function(data){
		// 	console.log('once');
		//      that.getPurseInfo();
		// 	 that.getServicePurseFlowRecord();
		// 	 that.getUserPurseFlowRecord();
		// });
	},
	onReachBottom() {
		console.log('onReachBottom!!');
	},
	methods: {
		scrolltolower() {
			console.log('scrolltolower');
			if (this.isAido) {
				this.getUserPurseFlowRecord();
				this.loadMoreText1 = '加载中';
			} else {
				this.getServicePurseFlowRecord();
				this.loadMoreText2 = '加载中'
			}
		},
		// 获取钱包信息
		getPurseInfo() {
			let that = this;
			let userId = this.userId;
			let data = {
				userId: userId,
				action: 'getPurseInfo'
			};
			api.getPurseInfo(data)
				.then(function(res) {
					console.log('getPurseInfo::', res);
					if (res.data.code == 2000) {
						that.useMonitor = regular.numFormat(res.data.data.servicePurse);
						that.useShop = regular.numFormat(res.data.data.userPurse);
					}
				})
				.catch(function(error) {
					console.log('getPurseInfo fail', error);
				});
		},
		// 获取服务钱包记录
		getServicePurseFlowRecord() {
			let that = this;
			let data = {
				userId: that.userId,
				action: 'getServicePurseFlowRecord',
				params: {
					startWith: that.monitorDetailCurrentIndex,
					moveLength: 10
				}
			};
			console.log(data);
			api.getServicePurseFlowRecord(data)
				.then(function(res) {
					console.log('getServicePurseFlowRecord success', res);
					if(res.data.code == 2000) {
						if(res.data.data.recordList.length > 0) {
							res.data.data.recordList.forEach(item => {
								if (item.amount >= 0) {
									item.amount = '+' + item.amount;
								}
								item.updateTime = util.Turn_Date(item.updateTime);
							});
							that.monitorInfo = that.monitorInfo.concat(res.data.data.recordList);
							that.monitorDetailCurrentIndex += res.data.data.recordList.length;
							that.loadMoreText2 = "加载完成"
						}else {
							that.loadMoreText2 = "暂无更多记录!"
						}
					}
				})
				.catch(function(error) {
					console.log('getServicePurseFlowRecord fail', error);
				});
		},
		// 获取用户钱包明细(商城)
		getUserPurseFlowRecord() {
			let that = this;
			let data = {
				userId: that.userId,
				action: 'getUserPurseFlowRecord',
				params: {
					startWith: that.shopDetailCurrentIndex,
					moveLength: 10
				}
			};
			api.getUserPurseFlowRecord(data)
				.then(function(res) {
					console.log('getUserPurseFlowRecord success', res);
					if (res.data.code == 2000) {
						res.data.data.recordList.forEach(item => {
							if (item.amount >= 0) {
								item.amount = '+' + item.amount;
							}
							item.updateTime = util.Turn_Date(item.updateTime);
						});
						that.aiDouInfo = that.aiDouInfo.concat(res.data.data.recordList);
						that.shopDetailCurrentIndex += res.data.data.recordList.length;
						that.loadMoreText1 = '加载完成';
					} else if (res.data.code == 2001) {
						if (res.data.message == '无更多记录') {
							that.loadMoreText1 = '没有更多记录了!';
						}
					}
				})
				.catch(function(error) {
					console.log('getUserPurseFlowRecord fail', error);
				});
		},
		// 监听切换item事件
		changeItem(e) {
			let index = e.detail.current;
			console.log(e.detail.current);
			if (index == 0) {
				this.toAidouDetail();
			} else if (index == 1) {
				this.toMonitorDetail();
			}
		},
		// to aidou detail
		toAidouDetail() {
			this.isAido = true;
			this.Tab1Size = 38;
			this.Tab2Size = 28;
			this.swiperIndex = 0;
		},
		// to monitor detail
		toMonitorDetail() {
			this.isAido = false;
			this.Tab1Size = 28;
			this.Tab2Size = 38;
			this.swiperIndex = 1;
		},
		// 去购买
		toBuy() {
			let that = this;
			// 清除数据
			that.aiDouInfo = [];
			that.monitorInfo = [];
			uni.$once('updatePurseInfo', function(data) {
				that.shopDetailCurrentIndex = 0;
				that.monitorDetailCurrentIndex = 0;
				that.getPurseInfo();
				that.getServicePurseFlowRecord();
				that.getUserPurseFlowRecord();
			});
			uni.navigateTo({
				url: 'buyAiDoll/buyAiDoll?useShop=' + that.useShop
			});
		},
		// 去使用
		toUse() {
			uni.switchTab({
				url: '../../shopMall/shopMall'
			});
		},
		// 监听返回按钮的触发
		onBackPress(options) {
			uni.$emit('updatePurseInfo', {});
			return false;
		}
	}
};
</script>

<style>
page {
	width: 100%;
	height: 100%;
	background-color: #fafafa;
}

.content {
	width: 750rpx;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

/* .TopView{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
} */
.MT24 {
	margin-top: 24rpx;
}
.ML45 {
	margin-left: 45rpx;
}
.ML54 {
	margin-left: 54rpx;
}
.card_view {
	/* margin-top: 10rpx; */
	width: 700rpx;
	height: 299rpx;
	border-radius: 15rpx;
	position: relative;
}

.card_img {
	height: 100%;
	position: absolute;
	width: 100%;
	left: 0px;
	top: 0px;
}

.card_view_content {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.card_view_content_L {
	margin-left: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
.card_view_content_L_T1 {
	font-size: 26rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #ffffff;
}
.card_view_content_L_T2 {
	margin-top: 10rpx;
	font-size: 58rpx;
	font-family: Roboto;
	font-weight: bold;
	color: #ffffff;
}
.title text {
	font-size: 38rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #333333;
}
/* tab */

.Tab {
	margin-top: 60rpx;
	width: 100%;
	height: auto;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
}
.Tab text {
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #333333;
}
.tabView {
	margin-top: 0;
	width: 750rpx;
	/* height: 50%; */
	/* background-color: #8F8F94; */
}
.ItemView {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.TabItemView {
	height: 100%;
	overflow: hidden;
}
.TabItem {
	margin: 23rpx auto 0;
	width: 700rpx;
	height: 200rpx;
	background-color: #ffffff;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.TabItemText {
	margin-left: 70rpx;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}
.ItemTitle {
	font-size: 38rpx;
	font-family: Source Han Sans SC;
	font-weight: bold;
	color: #000000;
}
.ItemDate {
	font-size: 28rpx;
	font-family: Roboto;
	font-weight: normal;
	color: #666666;
}
.ItemNum {
	margin-right: 78rpx;
	font-size: 60rpx;
	font-family: Roboto;
	font-weight: bold;
	color: #333333;
}
.frontLine {
	position: absolute;
	top: 70rpx;
	left: 38rpx;
	width: 10rpx;
	height: 33rpx;
	background-color: #0659c7;
	border-radius: 15px;
}
/*  */
.Bottom_View {
	position: relative;
	width: 100%;
	height: 100%;
}
.scrollView {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.loadMore {
	width: 100%;
	margin: 0 auto;
	font-size: 30rpx;
	font-family: Source Han Sans SC;
	font-weight: normal;
	color: #999999;
	display: block;
	text-align: center;
}
</style>
